import React, { useEffect, useState, Key } from "react";
import {
  Tree,
  Card,
  Row,
  Col,
  Tag,
  Pagination,
  Table,
  Button,
} from "antd";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
// 引入api
import {
  getPageListRequest, //获取分页列表
  DetailedTimeRequest, //某个科室的详细排班时间请求
  findScheduleListRequest, //获取某个科室吗某个时间具体详情
} from "@/api/hospital/hospitalList";
// 引入类型
import {
  getPageListType,
  bookingScheduleListType,
  accordingToTimeType,
} from "@/api/hospital/model/hospitalListTypes";
export default function HospitalSchedule() {
  const navigate = useNavigate();
  // 拿到对应的id发起请求
  const { hoscode } = useParams();
  // 树状数据
  const [treeData, setTreeData] = useState<getPageListType>([]);
  // 定义一个时间排班规则的当前页码
  const [page, setPage] = useState(1);
  //定义一个时间排班规则的每页条数
  const [limit, setLimit] = useState(3);
  //定义当前选中的科室
  const [depCode, setDepCode] = useState("200040878");
  //定义当前科室的排班规则
  const [scheduleRule, setScheduleRule] = useState<bookingScheduleListType>([]);
  //定义当前科室的排班规则总条数
  const [total, setTotal] = useState(0);
  // 第一次加载的值
  const [fiDepcode, setFiDepcode] = useState<any>();
  //定义当前选中的时间
  const [workDate, setWorkDate] = useState("2022-04-28");
  //定义表格的数据
  const [sourceData, setSourceData] = useState<accordingToTimeType>([]);
  //1.组件初始加载的时候发送科室列表请求
  useEffect(() => {
    const res = async () => {
      const re = await getPageListRequest(hoscode as string);
      setTreeData(re);
      setFiDepcode(re[0].depcode);
    };
    res();
  }, []);
  //2.组件初始加载的时候发送科室排班请求
  useEffect(() => {
    const res = async () => {
      const re = await DetailedTimeRequest({
        page: page,
        limit: limit,
        hoscode: hoscode as string,
        depcode: depCode,
      });
      setScheduleRule(re.bookingScheduleList);
      setTotal(re.total);
      //把数据中第一个时间交给wordDate这个状态的初始值
      setWorkDate(re.bookingScheduleList[0].workDate);
    };
    res();
  }, [page, limit, depCode]);
  //3.组件初始化的时候根据科室和时间发送详细信息请求
  useEffect(() => {
    const getFindScheduleList = async () => {
      const result = await findScheduleListRequest({
        hoscode: hoscode as string,
        depcode: depCode,
        workDate: workDate,
      });
      // console.log(result);
      setSourceData(result);
    };
    getFindScheduleList();
  }, [workDate, depCode]);
  // 回调函数
  // 1.点击页码时切换
  const changePageHandle = (page: number, limit: number) => {
    setPage(page);
    setLimit(limit);
  };

  // 2.点击排班的函数
  const DataChangge = (workDate: any) => {
    return () => {
      setWorkDate(workDate);
    };
  };

  // 3.点击tree的事件回调函数 (补充版)
  const treeChange = (_: any, e: { node: any }) => {
    setDepCode(e.node.depcode);
  };
  //table结构
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "可预约数",
      dataIndex: "reservedNumber",
    },
    {
      title: "挂号费用",
      dataIndex: "amount",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
    },
  ];
  // 样式
  const treeStyle = {
    border: "1px solid #000",
    height: "480px",
    overflow: "auto",
  };
  return (
    <Card>
      <p>选择:北京协和医院/多发性硬化专科门诊/2022-04-08</p>
      <Row gutter={20}>
        <Col span={5}>
          <Tree
            treeData={treeData as []}
            style={treeStyle}
            fieldNames={{ title: "depname", key: "depcode" }}
            defaultExpandedKeys={[fiDepcode]}
            // expandedKeys={[fiDepcode]}
            onSelect={treeChange}
          />
        </Col>
        <Col span={19}>
          <div style={{ marginBottom: "20px" }}>
            {scheduleRule.map((item) => (
              <Tag onClick={DataChangge(item.workDate)} key={item.workDate}>
                <p>{item.workDate}</p>
                <p>
                  {item.availableNumber}/{item.reservedNumber}
                </p>
              </Tag>
            ))}
          </div>
          <Pagination
            current={page}
            pageSize={limit}
            total={total}
            pageSizeOptions={[3, 8, 15]}
            //是否直接开启更新每页条数的选项
            showSizeChanger={true}
            onChange={changePageHandle}
          />
          <Table
            columns={columns}
            style={{ marginTop: "20px" }}
            bordered
            dataSource={sourceData}
            pagination={false} //关闭页码
            rowKey={"id"}></Table>
          <Button
            onClick={() => {
              navigate(-1);
            }}
            style={{ marginTop: "30px" }}
          >
            返回
          </Button>
        </Col>
      </Row>
    </Card>
  );
}
